<template>
  <n-drawer v-model:show="isDrawer" width="1000" :auto-focus="false" @after-leave="handleReset">
    <n-drawer-content title="方案管理" closable>
      <n-form
        :model="formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
      >
        <n-form-item label="方案名称" path="title">
          <n-input placeholder="请输入方案名称" v-model:value="formParams.title" />
        </n-form-item>
        <n-form-item label="收费说明" path="shuoming">
          <n-input placeholder="请输入收费说明" type="textarea" v-model:value="formParams.shuoming" />
        </n-form-item>
        <n-form-item label="计费方案" path="leixing">
          <n-radio-group v-model:value="formParams.leixing" name="leixing">
            <n-space>
              <n-radio :key="0" :value="0">按1分钟收费</n-radio>
              <n-radio :key="1" :value="1">按30分钟收费</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item>
        <n-card title="收费标准">
          <div class="top">
            <div class="left">
              <n-button type="info" @click="add">添加详情</n-button>
            </div>
          </div>
          <div class="center">
            <div class="liebiao" v-for="(item,index) in List" :key="index">
              <div class="left">
                <span>电量</span><n-select placeholder="请选择" v-model:value="item.shijian" :options="options" clearable class="input" />
              </div>
              <div class="left">
                <span>收费金额</span><n-input placeholder="0.00" v-model:value="item.money" class="input"/>
              </div>
              <div class="right" @click="remove(index)">删除</div>
            </div>
          </div>
        </n-card>
      </n-form>
      <template #footer>
        <n-space>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
        </n-space>
      </template>
    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import { electricInfo,electricEdit,electricAdd } from '@/api/chargeplan/index';

  const rules: FormRules = {
    title: {
      required: true,
      message: '方案名称不能为空',
      trigger: 'blur',
    }, shuoming: {
      required: true,
      message: '方案说明不能为空',
      trigger: 'blur',
    }
  };

  const defaultValueRef = () => ({
    id: null,
    title: '',
    shuoming: '',
    leixing: 0,
    content: '',
  });

  const message = useMessage();
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const formParams = ref(defaultValueRef());
  const emit = defineEmits(['change']);
  const List = ref([{
    shijian: '',
    money: '',
  }]);//默认显示方案详情

  const xqLIst = ref([{}]);//方案详情
  const options = ref([{}]);//选择列表

  //新增详情
  function add(){
    List.value.push({
      shijian: '',
      money: ''
    });
  }
  //移除详情
  function remove(index){
    List.value.splice(index, 1);
  }

  async function openDrawer(id?) {
    options.value = [];
    for(var j=1;j<49;j++){
      options.value.push({
        label: j + '度电',
        value: j,
      })
    }
    if (id) {
      formParams.value.id = id;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      //追加添加详情
      xqLIst.value = [];
      for (var i = 0; i < List.value.length; i++) {
        if(List.value[i].shijian){
          xqLIst.value.push({
            shijian: List.value[i].shijian,
            money: List.value[i].money,
          });
        }
      }
      formParams.value.content = JSON.stringify(xqLIst.value);

      if (!errors) {
        const msg = formParams.value.id ? '编辑成功' : '添加成功';
        if (formParams.value.id) {
          electricEdit(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        }else{
          electricAdd(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        }
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.restoreValidation();
    List.value = [];
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    electricInfo({ id: formParams.value.id }).then((res) => {
      const params = {
        id: formParams.value.id,
        title: res.title,
        shuoming: res.shuoming,
        leixing: res.leixing,
      };
      List.value = JSON.parse(res.content);
      formParams.value = Object.assign(formParams.value, params);
      isDrawer.value = true;
    });
  }

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
<style scoped>
  .top{
    height: 60px;
  }

  .top .left{
    float: left;
    width: 14%;
  }

  .center .liebiao{
    height: 50px;
  }

  .center .liebiao .left{
    float: left;
    width: 30%;
    height: 34px;
  }

  .center .liebiao .left span{
    float: left;
    height: 34px;
    line-height: 34px;
  }

  .center .liebiao .left .input{
    float: left;
    width: 180px;
    margin-left: 20px;
  }

  .center .liebiao .right{
    float: left;
    width: 76px;
    text-align: center;
    height: 34px;
    line-height: 34px;
    background: #ff4949;
    color: #fff;
    border-radius: 6px;
  }

</style>
